<template>
  <div class="home_div">
    <el-button @click="routeBtn">点击去酒店</el-button>
    <div :id="mapId" style="width: 100%; height: 100%;">
    </div>
    <div id="panel"></div>
</div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import { guideRoute } from '@/api/map'
export default {
  name: 'HotelSystemMap',
  props: {
    // 渲染的地图组件
    mapId: {
      type: String,
      default: 'map'
    },
    // 中心点
    center: {
      type: Array,
      default: () => [119.39846, 32.344809]
    },
    zoom: {
      type: Number,
      default: 16
    },
    // 传进来的关键词
    keyword: {
      type: String, // 定义一个名为 keyword 的 props 属性，类型为 String
      default: '' // 默认值为空字符串
    },
    // 是否在进入地图时，对个人进行定位
    enableGeolocation: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      map: null,
      placeSearch: null, // 关键词搜索的对象
      key: '408c2d0606a0b992c6a475b2e1aea485', // 获取api的用户的key
      startLngLat: [], // 起始位置就是用户位置的经纬度也是路线规划的起点
      endLngLat: [], // 酒店所在位置  也是规划的终点
      route: false // 是否进行路线规划
    }
  },

  mounted () {
    this.initMap()
  },
  methods: {
    // 地图初始化
    initMap () {
      // 加载高德地图 JavaScript API
      AMapLoader.load({
        key: '09a3b5266284dd13cda2392545575657',
        version: '2.0',
        plugins: ['AMap.Geocoder', 'AMap.PlaceSearch', 'AMap.ZoomControl', 'AMap.Driving', 'AMap.Geolocation']
      }).then((AMap) => {
      // 创建地图对象
        this.map = new AMap.Map(this.mapId, {
          zoom: this.zoom,
          center: this.center,
          viewMode: '3D'
        })
        // 创建定位对象
        if (this.enableGeolocation) {
          const geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, // 是否使用高精度定位，默认为 true
            timeout: 20000 // 超过10秒后停止定位，默认为5s
          })
          // 调用接口获取目标酒店的经纬度
          this.getHotelLnt()
          // 获取用户当前位置的经纬度

          geolocation.getCurrentPosition(function (status, result) {
            if (status === 'complete') {
              // 定位成功
            // 用户所在的位置
              const currentPosition = [result.position.lng, result.position.lat]
              console.log(`用户所在位置的经纬度：${currentPosition}`)
              // this.map.setCenter(currentPosition)
            } else {
              // 定位失败
              console.log(`定位失败：${result.message}`)
            }
          })
        }
        if (this.keyword) {
          console.log('关键词')
          // 关键词搜索
          const placeSearch = new AMap.PlaceSearch({
            pageSize: 3, // 每页显示的结果数量，默认为 10
            pageIndex: 1, // 当前页码，默认为 1
            city: '全国', // 搜索的城市，默认为全国
            map: this.map, // 将搜索结果显示在当前地图上
            panel: 'panel'
          })
          // 根据关键词搜索地点
          placeSearch.search(this.keyword)
          // 监听搜索服务的搜索完成事件
          AMap.event.addListener(placeSearch, 'complete', data => {
            // 遍历搜索结果，将每个地点显示在地图上
            data.poiList.pois.forEach(poi => {
              // 创建标记点
              const marker = new AMap.Marker({
                position: poi.location, // 标记点的位置
                title: poi.name // 标记点的标题
              })

              // 将标记点添加到地图上
              this.map.add(marker)
            })
          })
          // 监听搜索服务的搜索失败事件
          AMap.event.addListener(placeSearch, 'error', err => {
            console.error('搜索失败：', err)
          })
        }
      })
    },
    // 酒店的经纬度
    async getHotelLnt () {
      const key = this.key
      const address = this.keyword
      const { data: res } = await guideRoute(address, key)
      const hotelLocation = res.geocodes[0].location
      console.log('酒店位置的经纬度', hotelLocation)
    },
    // 路线规划
    routeBtn () {
      this.route = !this.route
      console.log(this.route)
      if (this.route) {
        // 进行路线规划
        const map = new AMap.Map('container', {
          resizeEnable: true,
          center: [116.397428, 39.90923], // 地图中心点
          zoom: 13 // 地图显示的缩放级别
        })
        // 构造路线导航类
        const driving = new AMap.Driving({
          map: map,
          panel: 'panel'
        })
        // 根据起终点经纬度规划驾车导航路线
        driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719), function (status, result) {
        // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
          if (status === 'complete') {
            log.success('绘制驾车路线完成')
          } else {
            log.error('获取驾车数据失败：' + result)
          }
        })
      } else {
        // 不进行路线规划就对酒店进行定位
        this.initMap()
      }
    }
  },
  beforeDestroy () {
    // 销毁地图对象
    this.map.destroy()
  }
}
</script>

<style lang="less" scoped>
.home_div {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  position: relative;
}
#panel {
position: absolute;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 10px;
  right: 10px;
  width: 280px;
}
#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
   border-top-right-radius: 4px;
}
#panel .amap-lib-driving {
border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
  overflow: hidden;
}

</style>
